<% layout('/layouts/default.html', {title: '商家管理', libs: ['validate','fileupload']}){ %>
<div class="main-content">
	<div class="box box-main">
		<div class="box-header with-border">
			<div class="box-title">
				<i class="fa fa-list-alt"></i> ${text(wxBusiness.isNewRecord ? '新增商家' : '编辑商家')}
			</div>
			<div class="box-tools pull-right">
				<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
			</div>
		</div>
		<#form:form id="inputForm" model="${wxBusiness}" action="${ctx}/wx/wxBusiness/save" method="post" class="form-horizontal">
			<div class="box-body">
				<div class="form-unit">${text('基本信息')}</div>
				<#form:hidden path="id"/>
				<#form:hidden path="oldGroupId"/>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4">分组选择：</label>
							<div class="col-sm-8">
								<#form:treeselect id="testOffice" title="商家分组选择"
								path="groupId" labelPath="wxBusinessGroupOrgConfig.groupName"
								url="${ctx}/wx/wxBusinessGroupOrgConfig/treeData" allowClear="true"/>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('商家名称')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="name" maxlength="200" class="form-control"/>
							</div>
						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-xs-12">
						<div class="form-group">
							<label class="control-label col-sm-2" title="">
								<span class="required hide">*</span> ${text('商家头图')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-4">
								<#form:fileupload id="upload2" bizKey="1" bizType="1"
								uploadType="image" readonly="false" maxUploadNum="1" returnPath="true" filePathInputId="pic"/>
								<#form:hidden path="pic" name="pic" id="pic" />

							</div>

							<div>
								已上传图片：<img src="${wxBusiness.pic}" width="80px" height="80px">
							</div>

						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-xs-12">
						<div class="form-group">
							<label class="control-label col-sm-2" title="">
								<span class="required hide">*</span> ${text('商家会员卡')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-4">
								<#form:fileupload id="upload3" bizKey="1" bizType="1"
								uploadType="image" readonly="false" maxUploadNum="1" returnPath="true" filePathInputId="vipCardImg"/>
								<#form:hidden path="vipCardImg" name="vipCardImg" id="vipCardImg" />

							</div>

							<div>
								已上传图片：<img src="${wxBusiness.vipCardImg}" width="80px" height="80px">
							</div>

						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-xs-12">
						<div class="form-group">
							<label class="control-label col-sm-2" title="">
								<span class="required hide">*</span> ${text('商家详情图(上限五张)')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-4">
								<#form:fileupload id="uploadDetial" bizKey="1" bizType="1"
										uploadType="image" readonly="false" maxUploadNum="5" returnPath="true" filePathInputId="detailImg"/>
								<#form:hidden path="detailImg" name="detailImg" id="detailImg" />

							</div>
							<div id="detailImgDiv">
								已上传详情图片：
							</div>

						</div>
					</div>
				</div>


				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('联系方式')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="phone" maxlength="200" class="form-control"/>
							</div>
						</div>
					</div>
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('备用手机号')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="phoneRes" maxlength="200" class="form-control"/>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('商家地址')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="address" maxlength="200" class="form-control"/>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('商家公众号链接')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="gongzonghao" maxlength="200" class="form-control"/>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('商家简介')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<div id="editor" style="height:324px;width:560px;" >
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row" style="display: none;">
					<div class="col-xs-12">
						<div class="form-group">
							<label class="control-label col-sm-2" title="">
								<span class="required hide">*</span> ${text('商家简介text')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-10">d
								<#form:textarea path="content" id="businessContent" rows="4" maxlength="1024" class="form-control"/>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-12">
						<div class="form-group">
							<label class="control-label col-sm-2" title="">
								<span class="required hide">*</span> ${text('商家核销描述')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-10">
								<#form:textarea path="remarks" rows="4" maxlength="200" class="form-control"/>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('商家视频')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<video controls="controls" preload="auto" style="width: 400px;">
									<source src="${wxBusiness.radio}" type="video/ogg" />
								</video>
								<#form:fileupload id="uploadFile" bizKey="}" bizType="testData_file"
								uploadType="all" class="" readonly="false" maxUploadNum="1" returnPath="true" filePathInputId="radio"/>
								<#form:hidden path="radio" name="radio" id="radio" />
							</div>
						</div>
					</div>
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-2" title="">
								<span class="required hide">*</span> ${text('视频缩略图')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-4">
								<#form:fileupload id="uploadVideo" bizKey="1" bizType="1"
								uploadType="image" readonly="false" maxUploadNum="1" returnPath="true" filePathInputId="videoImg"/>
								<#form:hidden path="videoImg" name="videoImg" id="videoImg" />

							</div>

							<div>
								已上传图片：<img src="${wxBusiness.pic}" width="80px" height="80px">
							</div>

						</div>
					</div>
				</div>

				<div class="row" style="display: none;">

					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-2" title="">
								<span class="required hide">*</span> ${text('地图')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-4">
								<div id='mapTagging' style='width: 700px;height: 400px;margin-top: 0px;margin-left: 50px;'>
									<div id='mapPosition'>
										<div id="container" style='height: 350px;border: 1px solid #ccc;border-radius: 5px;'></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="row" style="display: none;">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('选取的地图坐标')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<div>
									经度：<#form:input path="weizhiLeft" id="weizhiLeft" maxlength="200" class="form-control"/>
									纬度：<#form:input path="weizhiRight" id="weizhiRight" maxlength="200" class="form-control"/>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
			<div class="box-footer" style="margin-top: 50px">
				<div class="row">
					<div class="col-sm-offset-2 col-sm-10">
						<% if (hasPermi('wx:wxBusiness:edit')){ %>
							<button type="submit" class="btn btn-sm btn-primary" id="btnSubmit"><i class="fa fa-check"></i> ${text('保 存')}</button>&nbsp;
						<% } %>
						<button type="button" class="btn btn-sm btn-default" id="btnCancel" onclick="js.closeCurrentTabPage()"><i class="fa fa-reply-all"></i> ${text('关 闭')}</button>
					</div>
				</div>
			</div>
		</#form:form>
	</div>
</div>
<% } %>
<script src="//unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=DWVBZ-TUS66-L25SS-M75ZP-ADQDS-PSFQA"></script>
<script>
$("#inputForm").validate({
	submitHandler: function(form){
		js.ajaxSubmitForm($(form), function(data){
			js.showMessage(data.message);
			if(data.result == Global.TRUE){
				js.closeCurrentTabPage(function(contentWindow){
					contentWindow.page();
				});
			}
		}, "json");
    }
});

var str = '${wxBusiness.detailImg}';
var s=str.split(',');
for(var i = 0;i<s.length;i++){
	if(s[i]){
		$('#detailImgDiv').append("<img src='"+s[i]+"' width='80px' height='80px'>");
	}
}
mapInit('37.44878','118.58215');

function mapInit(jing,wei) {
    console.log(jing,wei);
    var center = new qq.maps.LatLng(jing,wei);
    map = new qq.maps.Map(document.getElementById('container'),{
        center: center,
        zoom: 15
    });
    //调用地址解析类
    // function address() {
    //     var info = new qq.maps.InfoWindow({map: map});
    //     geocoder = new qq.maps.Geocoder({
    //         complete : function(result){
    //             map.setCenter(result.detail.location);
    //             var marker = new qq.maps.Marker({
    //                 map:map,
    //                 position: result.detail.location,
    //                 animation:qq.maps.MarkerAnimation.DROP
    //             });
    //             markersArray.push(marker);
    //             //添加监听事件 当标记被点击了  设置图层
    //             qq.maps.event.addListener(marker, 'click', function() {
    //                 info.open();
    //                 info.setContent('<div style="width:150px;height:50px;">'+
    //                     result.detail.address+'</div>');
    //                 info.setPosition(result.detail.location);
    //             });
    //         }
    //     });
    // }
    // setTimeout(function() {
    //     address();
    //     //经纬度信息
    //     map.panTo(new qq.maps.LatLng(jing, wei));
    //     var latLng = new qq.maps.LatLng(jing, wei);
    //     //调用获取位置方法
    //     geocoder.getAddress(latLng);
    // }, 1000);
    //添加点击事件事件

    qq.maps.event.addListener(map,'click',function(event) {
        // console.log('您点击的位置为:[' + event.latLng.getLng()+' , ' + event.latLng.getLat() + ']');
        // $('#weizhi').html('点击的位置:[ ' + event.latLng.getLng()+' , ' + event.latLng.getLat() + ' ]')
        $('#weizhiLeft').val(event.latLng.getLng())
        $('#weizhiRight').val(event.latLng.getLat())
        // alert('您点击的位置为:[' + event.latLng.getLng()+',' + event.latLng.getLat() + ']')
    });
};

var editor;
var rule = $('#businessContent').val();

initEditor();
function initEditor(){
    var E = window.wangEditor
    editor = new E('#editor');
    editor.customConfig.onchange = function (html) {
        // 监控变化，同步更新到 textarea
        $('#businessContent').val(html);
        console.log(html)
    };
    // 自定义菜单配置
    editor.customConfig.menus = [
        'bold' /** 粗体*/, 'fontSize' /** 字号 */, 'fontName' /** 字体 */,'italic' /** 斜体 */,
        'justify',  // 对齐方式
        'undo',  // 撤销
        'redo'  // 重复
    ]

    editor.customConfig.uploadImgServer = 'pn/imagetextmaterial/localUpload'  // 上传图片到服务器
    // 将图片大小限制为 1M
    editor.customConfig.uploadImgMaxSize = 1 * 1024 * 1024
    editor.customConfig.uploadFileName = 'file';
    editor.customConfig.showLinkImg= false;
    // 限制一次最多上传 1 张图片
    editor.customConfig.uploadImgMaxLength = 1;
    editor.create();
    editor.txt.html(rule)
}

</script>

